<template>
	<view>
		<view class="activityBox">
			<view class="activityBox-Box">
				<view class="displayFlexSpaceBetween">
					<view class="activityBox-Box-Text">
						小场5v5飞盘 新手场
					</view>
				</view>
				<view class="activityBox-Box-header displayFlex">
					<image src="/static/images/tabbar/dabai.png" mode=""></image>
					<text>栖木社-官方活动</text>
					<text>#100人夸 #已团10场 #飞盘</text>
				</view>
				<view class="activityBox-Box-apply">
					<text class="">
						报名中
					</text>
					<text>6月25日</text>
					<text>周三</text>
					<text>18：00</text>
					<text>|</text>
					<text>10km</text>
					<text>倾城绿茵中心</text>
				</view>
				<view class="activityBox-Box-left displayFlex">
					<image src="/static/images/my/icon-预约数@2x.png " mode=""></image>
					<text>预约数 10人</text>
				</view>

			</view>
		</view>
		<view class="sortBox displayFlexSpaceBetween">
			<view class="sortBox-sort displayFlex">
				<text>排序</text>
				<!-- <image src="/static/images/my/降@2x.png" mode=""></image> -->
				<image src="/static/images/my/升@2x (1).png" mode=""></image>
			</view>
			<view class="sortBox-sort displayFlex">
				<text>参与次数</text>
				<image src="/static/images/my/降@2x.png" mode=""></image>
			</view>
			<view class="sortBox-sort displayFlex">
				<text>性别</text>
				<image src="/static/images/my/降@2x.png" mode=""></image>
			</view>
			<view class="sortBox-edit ">
				<view class="displayFlex" v-if="editShow==true" @tap="editTap()">
					<image src="/static/images/my/icon-取消推荐@2x.png" mode=""></image>
					<text>编辑</text>
				</view>
				<text v-else @tap="editQuitTap()">退出编辑</text>
			</view>
		</view>

		<!-- <commonCar :list="goodsProducts" @delect="delect" @accounts="accounts">

		</commonCar> -->
		<view class=" displayFlex" v-for="(item,index) in list" :key="index">
			<view class="headerNumber-checked">
				<image src="/static/images/my/icon-对号@2x.png " v-if="item.checked == 2" mode=""
					@tap="goodsCheck(item,index,item.checked)"></image>
				<image src="/static/images/my/icon-对号@2x(1).png " v-else mode="" @tap="goodsCheck(item,index,item.checked)"></image>
			</view>
			<view class="headerNumber  ">

				<view class=" displayFlex">
					<image :src="item.picUrl" mode=""></image>
					<view class="">
						<view class="headerNumber-name displayFlex">
							{{item.name}}
							<image src="/static/images/my/icon-女@2x.png" mode=""></image>

						</view>
						<view class="headerNumber-laber singleLine">
							{{item.title}}
						</view>
					</view>

				</view>
				<view class="headerNumber-time displayFlex">
					<image src="/static/images/my/icon-时间@2x.png" mode=""></image>
					<text>06月25 周三 18:00</text>
				</view>
			</view>
		</view>
		<view class="" style="margin-top: 150rpx;" v-show="AllShow ==true">
			1
		</view>
		<view class="AllBox displayFlexSpaceBetween" v-show="AllShow ==true">
			<view class="AllBox-left displayFlex" v-if="statisticsIndex" @tap="allCheck">
				<image src="/static/images/my/icon-对号@2x.png " mode=""></image>
				<text>全选</text>
			</view>
			<view class="AllBox-left displayFlex" v-else @tap="allCheck">
				<image src="/static/images/my/icon-对号@2x(1).png " mode=""></image>
				<text>全选</text>
			</view>
			<view class="AllBox-right" @tap="refuseTap()">
				<text class="">
					拒绝
				</text>
				<text class="" @tap="agreeTap()">
					全部同意
				</text>
			</view>
		</view>
	</view>

</template>

<script>
	// import commonCar from '@/components/shopCar/shopCar.vue'
	export default {
		components: {
			// commonCar
		},
		data() {
			return {
				editShow: true,
				AllShow: false,
				statisticsIndex: false,
				goodsProducts: [{
					name: '华为旗舰店',
					checked: 1,
					goods: [{
						img: '../../static/goods_avatar.png',
						title: '华为荣耀',
						remark: '256G',
						price: '128.80',
						number: 1,
						checked: 1
					}, {
						img: '../../static/goods_avatar.png',
						title: 'mate40',
						remark: '128G',
						price: '116.80',
						number: 1,
						checked: 1
					}]
				}, ],
				// 礼包服务数据
				list: [{
						title: '分享一些职场小技分享一些职场小技巧分享一些职场小技巧分享一些职场小技巧巧',
						time: '2028-4-22',
						name: '查看s',
						stay: '待同意',
						checked: 1,
						picUrl: 'https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?w=500&h=400&fit=crop' // 礼品盒图片
					},

					{
						title: '礼包服务',
						time: '2028-3-18',
						name: '宝宝',
						stay: '已同意',
						checked: 1,
						picUrl: 'https://images.unsplash.com/photo-1498837167922-ddd27525d352?w=500&h=400&fit=crop' // 食物图片
					},
					{
						title: '分享一些职场小技分享一些职场小技巧分享一些职场小技巧分享一些职场小技巧巧',
						time: '2028-4-22',
						name: '查看s',
						stay: '已同意',
						checked: 1,
						picUrl: 'https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?w=500&h=400&fit=crop' // 礼品盒图片
					},

					{
						title: '【1月20日】习近平对新型冠状病毒感染的肺炎1月20日】习近平对新型冠状病毒感染的肺炎',
						time: '2028-12-28',
						name: '更多',
						stay: '已拒绝',
						checked: 1,
						picUrl: 'https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=500&h=400&fit=crop' // 帆船图片
					},
				],
			}
		},
		methods: {

			delect(e) {
				console.log(e);
			},
			accounts(e) {
				console.log(e);
			},
			editTap() {
				setTimeout(() => {
					this.editShow = !this.editShow; //关闭显示弹出框
					this.AllShow = true;
				}, 100)
			},
			editQuitTap() {
				setTimeout(() => {
					this.editShow = !this.editShow; //关闭显示弹出框 
					this.AllShow = false;
				}, 100)
			},
			/*
			 拒绝
			 */
			refuseTap() {
				console.log('拒绝');
			},
			/* 
			 全部同意
			 */
			agreeTap() {
				console.log('全部同意');
			},
			/* 
			全选 
			 */
			allCheck() {
				if (this.statisticsIndex) {
					this.list.find((item, index) => {
						item.checked = 1
					})
					this.statisticsIndex = false
				} else {
					this.list.find((item, index) => {
						item.checked = 2
					})
					this.statisticsIndex = true
				}

			},
			/* 
			 商品选择
			 */
			goodsCheck(storeIndex, goodsIndex,goodsChecked) {
				console.log("storeIndex, goodsChecked：",storeIndex, goodsIndex,goodsChecked);
				if (goodsChecked == 1) {
					this.list[goodsIndex].checked = 2
				} else {
					this.list[goodsIndex].checked = 1
				}
				// //判断是否该店铺全选
				// let storeChecked = true
				// this.list[storeIndex].map((item,index)=>{
				// 	if(item.checked == 1){
				// 		storeChecked = false
				// 	}
				// })
				// if(storeChecked == false){
				// 	this.list[storeIndex].checked = 1
				// }else{
				// 	this.list[storeIndex].checked = 2
				// }
				//判断是否全选
				let statisticsIndex = true
				this.list.find((item, index) => {
					if (item.checked == 1) {
						statisticsIndex = false
					}
				})
				if (statisticsIndex == false) {
					this.statisticsIndex = false
				} else {
					this.statisticsIndex = true
				}

			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.activityBox {
		margin: 20rpx;

		&-Box {
			margin-top: 16rpx;
			padding: 25rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			&-Text {
				font-weight: 800;
				font-size: 36rpx;
				color: #333333;
			}

			&-left {
				font-weight: 500;
				font-size: 24rpx;
				color: #FF7F83;

				image {
					margin-right: 10rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}

			&-right {
				image {
					margin-left: 10rpx;
					width: 20rpx;
					height: 20rpx;
				}

				font-weight: 500;
				font-size: 24rpx;
				color: #FF7F83;
			}



			&-header {
				margin: 20rpx 0;

				image {
					width: 44rpx;
					height: 44rpx;
					border-radius: 50%;
				}

				text:nth-of-type(1) {
					font-weight: 800;
					font-size: 26rpx;
					margin: 0 15rpx;
					background: linear-gradient(to right, red, blue);
					-webkit-background-clip: text;
					background-clip: text;
					color: transparent;
				}

				text:nth-of-type(2) {
					font-weight: 800;
					font-size: 26rpx;
					color: #FF7F83;
				}
			}


			&-apply {
				font-weight: 500;
				font-size: 24rpx;
				color: #212121;
				margin-bottom: 25rpx;

				text:nth-of-type(1) {
					font-weight: 500;
					font-size: 24rpx;
					color: #FB353B;
					padding: 4rpx 8rpx;
					background: #FFE9E9;
					border-radius: 6rpx;
				}

				text {
					margin-right: 15rpx;
				}
			}
		}
	}

	.headerNumber {
		// background: #FFF;
		background-color: aquamarine;
		border-radius: 16rpx;
		padding: 25rpx;
		margin: 20rpx;
		font-weight: 500;
		font-size: 30rpx;
		width: 100%;

		&-checked {
			margin-left: 20rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		&-more {
			text-align: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;

			image {
				width: 20rpx;
				height: 20rpx;
				margin-left: 5rpx;

			}
		}

		image {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
			margin-right: 16rpx;
		}

		&-name {
			color: #333333;

			image {
				margin-left: 15rpx;
				width: 28rpx;
				height: 28rpx;
			}
		}

		&-laber {
			width: 350rpx;
			margin-top: 8rpx;
			font-size: 24rpx;
			color: #666666;
		}

		&-time {
			font-size: 26rpx;
			color: #666666;
			margin-top: 15rpx;

			image {
				margin-right: 15rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

	}

	.sortBox {
		background: #FFFFFF;
		border-radius: 26rpx 26rpx 0rpx 0rpx;
		border: 1rpx solid #EAEEF6;
		padding: 25rpx 30rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #666666;

		&-sort {

			image {
				margin-left: 10rpx;
				width: 20rpx;
				height: 20rpx;
			}
		}

		&-edit {
			width: 150rpx;

			image {
				margin-right: 10rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.AllBox {
		background: #FFF;
		width: 100%;
		padding: 40rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		text-align: center;
		background-color: #FFF;
		font-weight: 500;
		font-size: 36rpx;

		&-left {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;

			image {
				margin-right: 16rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

		&-right {
			margin-right: 80rpx;
			font-weight: 800;
			font-size: 28rpx;

			text:nth-of-type(1) {
				padding: 20rpx 50rpx;
				background: #F7F7F7;
				color: #FB353B;
				border-radius: 16rpx;
				margin-right: 25rpx;
			}

			text:nth-of-type(2) {

				color: #FFFFFF;
				padding: 20rpx 25rpx;
				background: #FB353B;
				border-radius: 16rpx;
			}
		}
	}

	.shop-car {
		width: 750rpx;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #F5F5F5;
	}
</style>